<template>
  <div class="normalNurse-container">
    <div class="tips">
      <span v-if="child.times <= 1" class="red"
        >请选择宝宝目前最主要症状，并填写持续天/次数；说明:带*的为必选项。</span
      >
      <span v-else class="red"
        >请选择宝宝目前最主要症状，并填写持续天数/次数（黄色字体为上次出现的症状，如果该症状已消失，请点击文字或√取消症状）；说明:带*的为必选项。</span
      >
      <!-- <span class="red">说明:带*的为必选项</span> -->
    </div>
    <div class="form-container">
      <div class="column">
        <div class="title">
          <span class="require">* </span>
          体温
          <!-- <span v-show="form.temperature >= 3" class="big-tip">发热</span> -->
        </div>
        <babyRadio
          :margin-right="6"
          :res-val.sync="form.temperature"
          :items.sync="tempers"
          flex-basic="68%"
        >
          <div class="title">
            <span v-show="form.temperature >= 3" class="big-tip">发热</span>
          </div>
        </babyRadio>
      </div>
      <div v-if="form.temperature >= 3" class="column">
        <div class="title">
          <span class="require">* </span>
          时长
        </div>
        <babyRadio
          :margin-right="7"
          :res-val.sync="form.tem_time"
          :items.sync="tem_times"
        >
          <span style="color: #ffb03e; margin-left: 20px;"
            >请选择从开始发热到目前持续时间</span
          >
        </babyRadio>
      </div>
      <div
        v-for="(item, index) in formList"
        :key="item.disease_id"
        class="column"
        :class="{columnActive: columnActive(item, index)}"
        @click="formItemClick(item, index)"
      >
        <div
          class="title"
          style="cursor:pointer"
          @click="$emit('jumpNext', item.disease_id)"
        >
          {{ item.disease_name }}
        </div>
        <div v-for="it in item.data" :key="it.symptom_id">
          <babyInput
            v-if="!it.special"
            v-model="it.day"
            :width="
              it.symptom.length > 8 ? 200 : it.symptom.length > 7 ? 100 : 100
            "
            :check.sync="it.is_checked"
            :label="`${it.symptom}: 持续`"
            unit="天"
            :symptom_id="it.symptom_id"
            :special="0"
          ></babyInput>
          <div v-if="it.special === 1" style="display:flex">
            <babyInput
              v-model="it.num"
              :margin-right="0"
              :check.sync="it.is_checked"
              :margin="0"
              :width="120"
              label=""
              unit="天排便一次，"
              :special="1"
            ></babyInput>
            <babyInput
              v-model="it.day"
              :check.sync="it.is_checked"
              :label="`持续`"
              class="cxk"
              :width="40"
              unit="天"
              :symptom_id="it.symptom_id"
              :special="1"
            ></babyInput>
          </div>
          <div v-if="it.special === 2" style="display:flex">
            <babyInput
              v-model="it.num"
              :check.sync="it.is_checked"
              :margin-right="10"
              :width="100"
              label="一天排便："
              class="cxk2"
              unit="次，"
              :special="2"
            ></babyInput>
            <babyInput
              v-model="it.day"
              :no-check="true"
              :check.sync="it.is_checked"
              :label="`持续`"
              :width="40"
              unit="天"
              :special="2"
            ></babyInput>
          </div>
          <div v-if="it.special === 3" style="display:flex">
            <babyInput
              v-model="it.num"
              :check.sync="it.is_checked"
              :margin-right="10"
              :width="100"
              label="夜间啼哭，白天正常"
              class="cxk2"
              :symptom_id="it.symptom_id"
              :special="3"
            ></babyInput>
            <babyInput
              v-model="it.day"
              :no-check="true"
              :check.sync="it.is_checked"
              :label="`持续`"
              :width="40"
              unit="天"
              :special="3"
            ></babyInput>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import babyRadio from '@/components/common/babyRadio/babyRadio';
import babyInput from '@/components/common/babyInput/babyInput';

export default {
  components: {
    babyRadio,
    babyInput
  },
  props: {
    id: {},
    child: [Object]
  },
  data() {
    return {
      tempers: [
        {label: '体温<36°C', value: 1},
        {label: '36°C<体温≤37.4°C', value: 2},
        {label: '37.4°C<体温≤38.5°C', value: 3},
        {label: '体温≥38.5°C', value: 4}
      ],
      tem_times: [],
      form: {
        temperature: 2,
        tem_time: 1
      },
      asked: false,
      formList: [],
      chooseArr: null
    };
  },
  computed: {
    columnActive() {
      return function(item, index) {
        const lth = item.data.filter(it => it.is_checked === 1).length;
        return lth !== 0;
      };
    }
  },
  watch: {
    'form.temperature': function(v) {
      if (v >= 3) {
        this.askHorror();
      }
    },
    id: {
      handler(v) {
        if (v) {
          this.getEnum();
        }
      },
      immediate: true
    },
    formList(val) {
      val.forEach((item, index) => {
        const lth = item.data.filter(it => it.is_checked === 1).length;
        if (lth !== 0 && !this.chooseArr) {
          this.chooseArr = {
            index,
            disease_id: item.disease_id
          };
        }
      });
    }
  },
  mounted() {},
  methods: {
    checkRules(coo) {
      const checkItemIsChecked = coo
        .map(e => {
          const checkItem = this.formList[e.i].data[e.j];
          return checkItem.is_checked === 1 && checkItem.day;
        })
        .every(e => e);

      const otherItemNochecked = this.formList
        .map((line, lineIndex) => {
          return line.data.every(
            (item, itemIndex) =>
              coo.some(e => lineIndex === e.i && itemIndex === e.j) ||
              item.is_checked === 2
          );
        })
        .every(e => e);
      if (checkItemIsChecked && otherItemNochecked) return true;
      return false;
    },
    getResult() {
      const allSymptom = this.formList.reduce((a, b) => {
        return a.concat(b.data);
      }, []);
      if (
        allSymptom.every(item => item.is_checked === 2) &&
        this.form.temperature <= 2
      ) {
        return {
          error: `至少勾选其中一项`
        };
      }
      const sympt = allSymptom.filter(
        symptom => symptom.stools && symptom.stools
      );
      const flagBianmi = sympt.filter(s => s.stools === 1 && s.is_checked === 1)
        .length;
      const flagFuxie = sympt.filter(s => s.stools === 2 && s.is_checked === 1)
        .length;
      if (flagFuxie && flagBianmi) {
        return {
          error: `便秘症状和腹泻症状不会同时出现，请重新勾选`
        };
      }
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < allSymptom.length; i++) {
        if (allSymptom[i].is_checked === 1 && !allSymptom[i].day) {
          return {
            error: `请填写${allSymptom[i].symptom}的持续天数`
          };
        }
      }
      const three = this.checkRules([{i: 3, j: 1}]);
      if (three && this.form.temperature <= 2) {
        return {
          error: `请至少勾选一项其他选项`
        };
      }
      const resFilter = allSymptom.filter(it => it.day || it.num);
      // eslint-disable-next-line consistent-return
      return {
        symptom_list: resFilter.map(it => {
          const obj = {
            id: it.symptom_id,
            day: it.day,
            num: it.num
          };
          if (it.num) {
            obj.num = it.num;
          }
          return obj;
        }),
        ...this.form
      };
    },
    askHorror() {
      if (this.asked) return;
      this.asked = false;
      this.$confirm('宝宝是否有惊厥史?', '', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      })
        .then(() => {
          this.form._Horror = true;
          this.$alert(
            '由于宝宝体温过高，并且有惊厥史，建议去医院就医。',
            '提示',
            {
              confirmButtonText: '确定'
            }
          );
        })
        .catch(() => {
          this.form._Horror = false;
        });
    },
    getEnum() {
      this.$http
        .post(this.$url.getDiseaseSymptom, {
          u_id: this.id
        })
        .then(res => {
          Object.keys(res.temperature).forEach(it => {
            if (res.temperature[it].is_selected === 1) {
              this.form.temperature = res.temperature[it].id;
            }
          });
          this.tem_times = res.tem_time.map(it => ({
            label: it.value,
            value: it.id
          }));
          res.list.forEach(it => {
            switch (it.disease_id) {
              case 2: // 便秘
                it.data.forEach(item => {
                  item.stools = 1;
                });
                break;
              case 5: // 腹泻
                it.data.forEach(item => {
                  item.stools = 2;
                });
                break;
            }
            it.data.forEach(item => {
              switch (item.symptom_id) {
                // case 165: // 便秘-排便一次
                //   item.special = 1;
                //   it.num = '';
                //   break;
                case 13: // 腹泻-一天排便
                  item.special = 3;
                  it.num = '';
                  break;
                case 166: // 腹泻-一天排便
                  item.special = 2;
                  it.num = '';
                  break;
              }
            });
          });
          this.formList = res.list;
        })
        .catch(this.$catch);
    },

    formItemClick(item, index) {
      const isCheckArr = item.data.filter(item => item.is_checked === 1);
      if (!this.chooseArr) {
        if (isCheckArr.length !== 0) {
          this.chooseArr = {
            index,
            disease_id: item.disease_id
          };
        }
      } else if (this.chooseArr.disease_id !== item.disease_id) {
        if (isCheckArr.length !== 0) {
          this.formList[this.chooseArr.index].data.forEach(option => {
            if (option.is_checked === 1) {
              option.is_checked = 2;
            }
          });
          this.chooseArr = {
            index,
            disease_id: item.disease_id
          };
        }
      }
    }
  }
};
</script>
<style lang="scss">
.normalNurse-container {
  background-color: #fff;
  padding: 0 10px;
  .tips {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    font-size: 13px;
    color: #333;
    box-sizing: border-box;
    .red {
      color: #ffb03e;
      font-size: 16px;
      font-weight: 700;
    }
  }
  .column {
    background-color: #f2f6ff;
    display: flex;
    align-items: center;
    min-height: 60px;
    margin-bottom: 8px;
    font-size: 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .title {
      position: relative;
      min-width: 70px;
      box-sizing: border-box;
      color: #4b90ff;
      padding-left: 10px;
      font-size: 16px;
      font-weight: bold;
      .require {
        position: absolute;
        left: 2px;
        top: -4px;
        color: #dd331d;
      }
      .big-tip {
        color: #fff;
        background-color: red;
        padding: 5px 15px;
        border-radius: 5px;
        margin-left: 1px;
      }
    }
  }
  .columnActive {
    background-color: #4b90ff;
    .title {
      color: #ffb03e;
    }
    .babyInput-special-container,
    .babyInput-container {
      .icon-checkbox-normal {
        border-color: #fff;
      }
      .cxk-unit,
      .cxk-span {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.cxk {
  .cxk-unit {
    width: 52px;
  }
}
.cxk2 {
  margin-right: 14px;
  .cxk-span {
    // text-align: right;
    box-sizing: border-box;
    padding-right: 10px;
  }
}
</style>
